<template>
	<view style="height:100vh">
		<view class="top-container">
			<uni-steps :active="activeIndex" active-color="#FFF" :options="stepOptions"></uni-steps>
		</view>
		<view class="body-container">
			<view v-show="activeIndex == 0">
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;镇信息
					</view>
					<picker mode="selector" :value="personInfo.township" :range="townshipList" @change="townshipChange" range-key="tagName"
					 class="picker_class">
						<view style="width: 100%;">{{personInfo.township?personInfo.township:'请选择镇'}}</view>
					</picker>
				</view>
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;村信息
					</view>
					<picker mode="selector" :value="personInfo.village" :range="villageList" @change="villageChange" range-key="tagName"
					 class="picker_class">
						<view style="width: 100%;">{{personInfo.village?personInfo.village:'请选择村'}}</view>
					</picker>
				</view>
				<button class="next-button" @click="toNext">下一步</button>
			</view>
			<view v-show="activeIndex == 1">
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;真实姓名
					</view>
					<input type="text" v-model="personInfo.realName" placeholder="请输入真实姓名" class="picker_class" />
				</view>
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;身份证号
					</view>
					<input type="text" v-model="personInfo.idCard" placeholder="请输入身份证号" class="picker_class" />
				</view>
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;联系方式
					</view>
					<input type="text" v-model="personInfo.phone" placeholder="请输入联系方式" class="picker_class" />
				</view>
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;验证码码
					</view>
					<view style="display: flex;flex-direction: row;">
						<input type="text" v-model="personInfo.phone" placeholder="请输入验证码" class="picker_class" />
						<view style="width: 1px;height: 60upx;margin-top:20upx;background-color: #b6b6b6;margin-left: 20upx;"></view>
						<text style="font-size: 24upx;color: #00BFFF;width: 160upx;line-height: 100upx;text-align: right;">发送验证码</text>
					</view>
				</view>
				<view class="group_item">
					<view class="group_title">
						<span style="color: red;">*</span>&nbsp;详细地址
					</view>
					<input type="text" v-model="personInfo.address" placeholder="请输入详细地址" class="picker_class" />
				</view>
				<button class="next-button1" @click="toBack">上一步</button>
				<button class="next-button" @click="bindInfo">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	export default {
		data() {
			return {
				activeIndex: 0,
				stepOptions: [{
					title: "村镇信息"
				}, {
					title: "身份信息"
				}, ],
				personInfo: {
					township: "",
					village: "",
					realName: "",
					idCard: "",
					phone: "",
					address: ""
				},
				townshipList: [],
				villageList: [],
			}
		},
		components: {
			uniSteps
		},
		methods: {
			townshipChange(e) {

			},
			villageChange(e) {

			},
			toNext() {
				this.activeIndex = 1;
			},
			toBack() {
				this.activeIndex = 0;
			},
			bindInfo() {

			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.top-container {
		height: 260upx;
		background-image: url("https://cdjjyl.com.cn/imageCollection/jiange/indexImage/bg_top.png");
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 100upx 60upx 0 60upx;
	}

	.body-container {
		padding: 20upx;
		border-radius: 30upx;
		background-color: #FFF;
		height: calc(100% - 260upx);
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		background: red;
		flex-direction: row;
		background-color: white;
		/* justify-content: space-between; */
	}

	.group_title {
		width: 240upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		font-weight: bold;
		letter-spacing: 2upx;
	}

	.picker_class {
		width: 70%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		/* 		text-align: right; */
	}

	.next-button {
		position: fixed;
		bottom: 80upx;
		margin-top: 100upx;
		width: 80%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 10upx;
		margin-left: calc(10% - 20upx);
		background: #4ca3ff !important;
		color: white;
	}

	.next-button1 {
		position: fixed;
		bottom: 180upx;
		margin-top: 100upx;
		width: 80%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 10upx;
		margin-left: calc(10% - 20upx);
		background: #4ca3ff !important;
		color: white;
	}
</style>
